<template>
  <div class="dashboard-container">
    <!-- 筛选条件 -->
    <div class="filter">
        <el-date-picker 
            v-model="params.start_date"
            type="date"
            placeholder="开始日期"
            style="width: 130px;"
            value-format="yyyy-MM-dd"
            size="mini"
        ></el-date-picker> - 
        <el-date-picker 
            v-model="params.end_date"
            type="date"
            placeholder="结束日期"
            style="width: 130px;margin-right: 5px;"
            size="mini"
            value-format="yyyy-MM-dd"
        ></el-date-picker>
        <el-time-picker
            v-model="params.start_time"
            placeholder="开始时间"
            style="width: 130px;"
            size="mini"
            value-format="HH:mm:ss"
        >
        </el-time-picker>-
        <el-time-picker
            v-model="params.end_time"
            placeholder="结束时间"
            style="width: 130px;margin-right: 5px;"
            size="mini"
            value-format="HH:mm:ss"
        >
        </el-time-picker>
        <el-input v-model="params.amount" placeholder="总金额" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>
        <el-input v-model="params.z_value" placeholder="本位值" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>
        <el-input v-model="params.number2_min" placeholder="最小份数" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>-
        <el-input v-model="params.number2_max" placeholder="最大分数" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>
        <el-input v-model="params.start" placeholder="场次开始" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>-
        <el-input v-model="params.end" placeholder="场次结束" size="mini" style="width: 100px;margin-right: 5px;" clearable></el-input>
        <el-select v-model="params.is_task" clearable size="mini" style="margin-right: 5px">
            <el-option label="任务生成" :value="1"></el-option>
        </el-select>
        <el-button type="primary" size="mini" @click="handleSearch">查询</el-button>
        <el-button type="primary" size="mini" @click="handleResetSearch">重置</el-button>
        
    </div>
    <div  style="height: 50px;">
        <el-button type="primary" style="float: right" @click="handleAdd">录入数据</el-button>
    </div>


    <!-- 列表内容 -->
    <div class="table">
        <div class="table_item" v-for="item in list" :key="item.id" v-if="list.length>0">
            <div class="item_left">
                <div class="l-content">
                    <div class="id">场次{{ item.id }}</div>
                    <div class="wrap_border">金额<span class="number">{{ item.amount }}</span></div>
                    <div class="wrap_border" v-if="item.win_num>item.los_num">结果<span class="status red" >胜</span></div>
                    <div class="wrap_border" v-if="item.win_num<item.los_num">结果<span class="status green" >负</span></div>
                    <div class="wrap_border" v-if="item.win_num==item.los_num">结果<span class="status" >平</span></div>
                    
                </div>
                
                <div class="r-content">
                    <div class="id">{{ item.date }} {{ item.time }}</div>
                    <div class="wrap_border">份数<span class="number">{{ item.number }}</span></div>
                    <div class="wrap_border">结果数(倍)
                        <span class="result red" v-if="item.win>item.los">+{{ item.win-item.los }}</span>
                        <span class="result green" v-if="item.win<item.los">{{ item.win-item.los }}</span>
                        <span class="result" v-if="item.win==item.los">0</span>
                    </div>
                    
                </div>
                <div class="wrap_border">结果数
                    <span class="result red" v-if="item.win_num>item.los_num">+{{ item.win_num-item.los_num}}</span>
                    <span class="result green" v-if="item.win_num<item.los_num">{{ item.win_num-item.los_num }}</span>
                    <span class="result" v-if="item.win_num==item.los_num">0</span>
                </div>
                <div class="wrap_border" style="width: 260px;">庄:
                    <span class="result" v-if="item.name">{{item.name}}</span>
                </div>
                <div style="text-align: center;"><el-button type="danger" size="mini" @click="deleteItem(item.id)">删除该场次</el-button></div>
            </div>
            <div class="item_content">
                <div class="item" v-for="valueData in item.total_enter_details" :key="valueData.id">
                    <div class="title" v-if="valueData.is_z!=1">第{{valueData.index}}位</div>
                    <div class="title red" v-else>本位</div>
                    <div class="number">{{valueData.input||valueData.amount}}</div>
                </div>
            </div>
            <div class="item_right">
                <div class="item_number">
                    <div class="title win">胜(倍)</div>
                    <div class="number">{{ item.win }}</div>
                </div>
                <div class="item_number">
                    <div class="title los">负(倍)</div>
                    <div class="number">{{ item.los }}</div>
                </div>
                <div class="item_number">
                    <div class="title win">胜</div>
                    <div class="number">{{ item.win_num }}</div>
                </div>
                <div class="item_number">
                    <div class="title los">负</div>
                    <div class="number">{{ item.los_num }}</div>
                </div>
            </div>
        </div>
        <div v-if="list.length==0" style="text-align: center;padding: 40px 0;">暂无数据</div>
        <div style="padding: 20px 0 ;">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="params.page_index"
                :page-sizes="[10, 20, 30, 100]"
                :page-size="params.page_size"
                layout="total, sizes, prev, pager, next, jumper"
                style="float: right;"
                :total="total">
            </el-pagination>
        </div>
    </div>

    <!-- 弹窗录入结果 -->
    <el-dialog title="录入数据" :visible.sync="dialogVisible">
        <el-form size="mini" :inline="true" >
            <el-form-item label="日期" prop="date">
                <el-date-picker
                    v-model="temp.date"
                    type="date"
                    placeholder="选择日期"
                    style="width: 130px;"
                >
                </el-date-picker>
            </el-form-item>
            <el-form-item label="时间" prop="time">
                <el-time-picker
                    v-model="temp.time"
                    placeholder="选择时间点"
                    style="width: 130px;"
                >
                </el-time-picker>
            </el-form-item>
            <br/>
            <el-form-item label="金额" prop="amount">
                <el-input type="number" placeholder="请输入金额" v-model="temp.amount" style="width: 130px;"></el-input>
            </el-form-item>
            <el-form-item label="份数" prop="number">
                <el-input @change="handleReset" type="number" placeholder="请输入份数" v-model="temp.number" style="width: 130px;"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="handleCompose">生成</el-button>
            </el-form-item>
            <div class="wrap" v-if="temp.dataList.length>0">
                <el-row :gutter="20">
                    <el-col :span="4" v-for="item, index in temp.dataList" :key="index">
                        <div class="item">
                            <div class="title" v-if="item.is_z!=1">第{{item.index}}位</div>
                            <div class="title red" v-else>本位</div>
                            <div class="input">
                                <el-input 
                                    :ref="'input'+item.index"
                                    placeholder="请输入" 
                                    size="mini" 
                                    style="margin-top: 10px;" 
                                    v-model="item.amount"
                                    :disabled="is_reduce"
                                    @input="(val)=>handleChangeVal(val, item.index+1)"
                                    @keyup.enter.native="moveToNextInput(item.index+1)"
                                ></el-input>
                            </div>
                        </div>
                    </el-col>
                </el-row>

                <el-tag type="warning">注意：请输入00-99整数2位数字 </el-tag>
            </div>
            <div class="bottom" v-if="is_reduce">
                <div class="item">
                    <div class="normal win">胜</div>
                    <div class="number">{{ temp.win_num }}</div>
                </div>
                <div class="item">
                    <div class="normal loser">负</div>
                    <div class="number">{{ temp.los_num }}</div>
                </div>
                <div class="item">
                    <div class="normal win">胜(倍)</div>
                    <div class="number">{{ temp.win }}</div>
                </div>
                <div class="item">
                    <div class="normal loser">负(倍)</div>
                    <div class="number">{{ temp.los }}</div>
                </div>
                
                <div class="item">
                    <div class="normal">结果</div>
                    <div class="number red" v-if="temp.win_num - temp.los_num>0">胜</div>
                    <div class="number" v-if="temp.win_num - temp.los_num==0">平</div>
                    <div class="number green" v-if="temp.win_num - temp.los_num<0">负</div>
                </div>
                 <div class="item">
                    <div class="normal">值</div>
                    <div class="number red" v-if="temp.win_num - temp.los_num>0">
                        +
                        {{ temp.win_num - temp.los_num }}
                    </div>
                    <div class="number" v-if="temp.win_num - temp.los_num==0">
                        {{ temp.win_num - temp.los_num }}
                    </div>
                    <div class="number green" v-if="temp.win_num - temp.los_num<0">
                        {{ temp.win_num - temp.los_num }}
                    </div>
                </div>
                <div class="item">
                    <div class="normal">值(倍)</div>
                    <div class="number red" v-if="temp.win - temp.los>0">
                        +
                        {{ temp.win - temp.los }}
                    </div>
                    <div class="number" v-if="temp.win - temp.los==0">
                        {{ temp.win - temp.los }}
                    </div>
                    <div class="number green" v-if="temp.win - temp.los<0">
                        {{ temp.win - temp.los }}
                    </div>
                </div>
                
                <el-button type="primary" style="float: right;" @click="submit">确认输入</el-button>
                <el-button style="float: right;margin-right: 10px;" @click="handleRepeat">查重</el-button>
            </div>
        </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import { enterCreate, enterGetList, enterDelete, enterRepeat } from '@/api/enter'
const params = {
    page_index: 1,
    page_size: 10,
    z_value: '',
    amount: '',
    start_date:'',
    end_date: '',
    start_time: '',
    end_time: '',
    number2_min: '',//最小份数
    number2_max: '',//最大份数
    start: '',
    end: '',
    is_task: 1
}

export default {
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  data(){
    return {
        dialogVisible: false,
        temp: {
            date: '',
            time: '',
            number: '',
            amount: '',
            dataList: [],
            win: '',
            los: '',
        },
        is_reduce: false,
        params: {},
        total: 0,
        list: []
    }
  },
  mounted(){
    this.handleResetSearch();
    this.getData();
  },
  methods: {
    //点击查重复
    async handleRepeat(){
        let params = this.temp.dataList.map(item=>{
            return { amount: item.amount, is_z: item.is_z, index: item.index }
        })

        let data = await enterRepeat({ data: params })
        if(data.result==0){
            this.$message.success({ message: '未重复' })
        }else{
            this.$message.error({ message: '出现重复场次：'+data.result })
        }
    },
    //删除该场次
    deleteItem(id){
        this.$confirm('此操作将永久删除该场次数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await enterDelete({ id })
          this.getData();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    // 转化数字
    transValue(str){
        // 录入值位00-99的字符串
        let first = Number(str[0])
        let second = Number(str[1])
        let number = (first + second)%10
        // 排除特殊情况
        if(str=='10') number=10;
        if(number==0) number=10
        return number
    },
    handleResetSearch(){
        this.params = JSON.parse(JSON.stringify(params)) 
        this.getData();
    },
    //点击搜索
    handleSearch(){
        this.params.page_index = 1;
        this.getData();
    },
    //获取列表数据
    async getData(){
        let data = await enterGetList(this.params)
        this.list =data.list;
        this.total = data.total;
    },
    //切换尺寸
    handleSizeChange(val) {
        this.params.page_size = val;
        this.params.page_index = 1;
        this.getData();
    },
    //切换当前分页
    handleCurrentChange(val) {
        this.params.page_index = val;
        this.getData();
    },
    //提交表单
    async submit(){
        let temp = JSON.parse(JSON.stringify(this.temp))
        if(temp.amount<=0){
            this.$message.error({ message: '必须大于0' })
            return;
        }
        temp.date = moment(temp.date).format('YYYY-MM-DD')
        temp.time = moment(temp.time).format('HH:mm:ss')
        await enterCreate(temp)
        this.dialogVisible = false;
        this.$message.success({ message: '添加成功' })
        this.getData();
    },
    //本位与其他位进行比较
    composedResult(num1, num2){
        let str1 = (Number(num1).toFixed(2)*100).toString();
        let result1 = (Number(str1.slice(-1)) + Number(str1.slice(-2, -1)))%10;
        //排除一种特殊情况， 1.10这个算10
        if(str1.slice(-2)=='10'){
            result1 = 10;
        }

        let str2 = (Number(num2).toFixed(2)*100).toString();
        let result2 = (Number(str2.slice(-1)) + Number(str2.slice(-2, -1)))%10;
        //排除一种特殊情况， 1.10这个算10
        if(str2.slice(-2)=='10'){
            result2 = 10;
        }
        if(result1>result2){
            return 1; //胜
        }
        if(result1<result2){
            return 2;//负
        }
        if(result1=result2){
            return 3;//平
        }
    },
    // 计算小数相加
    roundedSum(arr) {
        const sum = arr.reduce((a, b) => a + b, 0);
        return Number(sum.toFixed(2)); // 保留2位小数
    },
    handleChangeVal(val, index){
        console.log(val.length)
        if(val.length==2){
            if((index-1)==this.temp.number)return
            this.moveToNextInput(index)
        }
    },
    //跳转下一个光标
    moveToNextInput(index){
        //需要单独判断下是不是本位
        if((index-1)==this.temp.number){
            //做验证,验证哪几位未填
            let errList=[];
            this.temp.dataList.forEach(item=>{
                if(item.amount==""||item.amount.length!=2){
                    errList.push(item.index)
                }
            })
            if(errList.length>0){
                return this.$message.error({ message: `第${errList.join(',')}位数据不正确，应该为00-99的2位整数` })
            }
            // 验证总金额
            // 改成输入牛几
            // let amount = this.roundedSum(this.temp.dataList.map(item=>Number(item.value)))
            // if(this.temp.amount!=amount)return this.$message.error('总金额合计不匹配，合计'+amount)

            //开始计算本位胜负
            let composedAmount = this.transValue(this.temp.dataList[this.temp.dataList.length-1].amount); //找到本位的数值
            this.temp.dataList = this.temp.dataList.map(item=>{
                item.value = this.transValue(item.amount)
                if(item.is_z!=1){
                    //排除掉本位不计算
                    if(composedAmount>item.value)item.result = 1
                    if(composedAmount<item.value)item.result = 2
                    if(composedAmount==item.value)item.result = 3
                }
                return item;
            })
            //统计胜负值
            let los = 0;
            this.temp.dataList.forEach(item=>{
                if(item.result==2){
                    // 负数
                    los = los + item.value
                }
            })
            
            this.temp.win_num = this.temp.dataList.filter(item=>item.result==1).length
            this.temp.los_num = this.temp.dataList.filter(item=>item.result==2).length

            this.temp.win =  this.temp.win_num*composedAmount       // 庄赢的时候，就是数量*庄的值
            this.temp.los = los

            this.is_reduce = true;
            return;
        }
        //移至下一个光标
        this.$refs['input'+index][0].focus()
    },
    //置空数据
    handleReset(){
        this.temp.dataList = []
    },
    //点击生成位数
    handleCompose(){
        if(this.temp.number>=2&&this.temp.number<=100){
            let data = [];
            for(let i = 1; i<=this.temp.number;i++){
                if(i==this.temp.number){
                    data.push({
                        index: i,
                        value: '', //牛牛值
                        result: '', //1胜利 2负 3平 本位为空
                        is_z: 1, //1本位 0非本位
                        amount: '', //输入值
                    })
                }else{
                    data.push({
                        index: i,
                        value: '',
                        result: '',
                        is_z: 0,
                        amount: '', //输入值
                    })
                }
            }
            this.temp.dataList = data;
            this.temp.win = '';
            this.temp.los = '';
            this.is_reduce = false;
        }else{
            this.$message.error({ message:'生成数量在2-100之间' })
        }
    },
    //点击录入
    handleAdd(){
        this.dialogVisible = true
        this.is_reduce = false;
        //数据初始化
        this.temp= {
            date: new Date(),
            time: new Date(),
            number: '',
            amount: '',
            dataList: [],
            win: '',
            los: '',
        };
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {

  &-container {
    margin: 30px;

    .filter{
        height: 40px;
    }

    .table{
        .table_item{
            border: 1px solid var(--Labels---Vibrant---Controls-Tertiary, #D9D9D9);
            margin-bottom: 10px;
            font-size: 12px;
            position: relative;
            border-radius: 10px;
            overflow: hidden;
            .item_right{
                width: 108px;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                background: #F5F5F5;
                .item_number{
                    width: 50px;
                    height: 50px;
                    border: 1px solid #D9D9D9;
                    background: #fff;
                    border-radius: 4px;
                    overflow: hidden;
                    text-align: center;
                    margin: 10px auto 0;
                    .title{
                        height: 20px;
                        line-height: 20px;
                        color: #fff;
                    }
                    .number{
                        height: 30px;
                        line-height: 30px;
                        font-weight: bold;
                    }
                    .win{
                        background: #FF5F57;
                    }
                    .los{
                        background: #27C840;
                    }
                }
            }
            .item_content{
                margin-left: 340px;
                height: 100%;
                padding: 20px;
                margin-right: 80px;
                overflow-y: scroll;
                .item{
                    width: 50px;
                    height: 50px;
                    display: inline-block;
                    margin-right: 10px;
                    margin-bottom: 10px;
                    border: 1px solid #D9D9D9;
                    border-radius: 5px;
                    font-size: 12px;
                    text-align: center;
                    .title{
                        background: #E9EFFA;
                        height: 20px;
                        line-height: 20px;
                    }
                    .red{
                        color: #FF2D55;
                    }
                    .number{
                        line-height: 30px;
                        font-weight: bold;
                    }
                }
            }
            .item_left{
                background: #FEFAF6;
                padding: 10px;
                width: 320px;
                display: inline-block;
                float: left;
                .id{
                    line-height: 30px;
                }
                .wrap_border{
                    width: 130px;
                    height: 48px;
                    line-height: 48px;
                    font-size: 14px;
                    background-color: #fff;
                    border: 1px solid #D9D9D9;
                    padding: 0 10px;
                    border-radius: 10px;
                    margin-bottom: 10px;
                    
                }
                .number{
                    font-size: 24px;
                    font-weight: bold;
                    float: right;
                }
                .status{
                    float: right;
                    width: 57px;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    background: #a4a4a9;
                    border-radius: 5px;
                    margin-top: 4px;
                    font-weight: bold;
                    color: #fff;
                    font-size: 24px;
                }
                .status.red{
                    background: #FF5F57;
                }
                .status.green{
                    background: #27C840;
                }
                .result{
                    float: right;
                }
                .result.red{
                    color: #FF2D55;
                }
                .result.green{
                    color: #27C840;
                }
                .l-content{
                    width: 130px;
                    display: inline-block;
                    margin-right: 10px;
                }
                .r-content{
                    width: 130px;
                    display: inline-block;
                }
            }
        }
    }

    .wrap{
        background: #D1D1D6;
        padding: 20px;
        .item{
            text-align: center;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 5px;
            .title{
                height: 30px;
                line-height: 30px;
                background: #E9EFFA;
                font-size: 12px;
            }
            .red{
                color: red;
            }
            .input{
                height: 50px;
                padding: 0 5px;
                background: #fff;
            }
        }
    }

    .bottom{
        padding: 20px 0;
        .item{
            width: 50px;
            height: 50px;
            text-align: center;
            display: inline-block;
            margin-right: 10px;
            border: 1px solid #D9D9D9;
            border-radius: 4px;
            overflow: hidden;
            .normal{
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                background: #F2F2F7;
            }
            .win{
                background: #FF5F57;
                color: #fff;
            }
            .loser{
                background: #27C840;
                color: #fff;
            }
            .number{
                height: 30px;
                line-height: 30px;
                font-weight: bold;
            }
            .red{
                color: #FF5F57;
            }
            .green{
                color: #27C840;
            }
        }
    }
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
